<div class="main-container">
  <div class="row">
    <div class="free-demo-board" fGrid="12">
      <div style="padding-right: 1rem;">
        <div [innerHTML]="'MAIN.INTRODUCTION' | translate"></div>
      </div>
      <p><b>{{'MAIN.CURRENT-VERSION' | translate}}：</b> <img src="https://img.shields.io/npm/v/freeng.svg"></p>
      <hr>
      <blockquote [innerHTML]="'START.KNOW' | translate"></blockquote>
      <h4 style="margin: 20px 0;font-weight: bold;">{{'GET-START' | translate}}</h4>
      <div class="free-card-board">
        <free-panel header="Download">
          <free-code lang="javascript">
            npm install freeng --save
          </free-code>
        </free-panel>
      </div>
      <div class="free-card-board">
        <free-panel header="Usage">
          <h4 [innerHTML]="'START.IMPORT' | translate"></h4>
          <free-code lang="javascript">
            import &#123;AccordionModule&#125; from 'freeng/freeng'; //accordion

            @NgModule(&#123;
              declarations: [AppComponent, ...],
              imports: [AccordionModule, ...],
              bootstrap: [AppComponent]
            &#125;)
            export class AppModule &#123;&#125;
          </free-code>
          <h4 [innerHTML]="'START.COMPONENT' | translate"></h4>
          <free-code lang="javascript">
            //import &#123;ComponentModule&#125; from 'freeng/component/componentname/componentname.component';

            import &#123;AccordionModule&#125; from 'freeng/component/accordion/accordion.component';
          </free-code>
          <h4 [innerHTML]="'START.DIRECTIVE' | translate"></h4>
          <free-code lang="javascript">
            //import &#123;ComponentModule&#125; from 'freeng/component/directivename/directivename.directive';

            import &#123;ButtonModule&#125; from 'freeng/component/button/button.directive';
          </free-code>
        </free-panel>
      </div>
      <h4 style="margin: 20px 0;font-weight: bold;">Resources</h4>
      <div class="free-card-board">
        <free-panel header="Copy resources">
          <free-code lang="javascript">
            cp -r node_modules/freeng/resources/ src/assets/resources
          </free-code>
        </free-panel>
      </div>

      <div class="free-card-board">
        <free-panel header="Dependencies">
          <p>YOUR_PATH: assets/resources</p>
          <free-code lang="javascript">
            &lt;link rel="stylesheet" href="&lt;YOUR_PATH&gt;/font-awesome.min.css" /&gt;
            &lt;link rel="stylesheet" href="&lt;YOUR_PATH&gt;/freeng.min.css" /&gt;
            &lt;link rel="stylesheet" href="&lt;YOUR_PATH&gt;/themes/blue.css"/&gt;
          </free-code>
        </free-panel>
      </div>

      <div class="free-card-board">
        <free-panel header="Animations">
          <p>{{'START.ANIMATION' | translate}}</p>
          <h4>Install</h4>
          <free-code lang="javascript">
            npm install @angular/animations --save
          </free-code>
          <h4>Usage</h4>
          <free-code lang="typescript">
            import &#123;BrowserModule&#125; from '@angular/platform-browser';
            import &#123;BrowserAnimationsModule&#125; from '@angular/platform-browser/animations';

            @NgModule(&#123;
              imports: [
                BrowserModule,
                BrowserAnimationsModule,...]
              &#125;)
            export class AppModule &#123; &#125;
          </free-code>
        </free-panel>
      </div>

      <div class="free-card-board">
        <free-panel header="Angular CLI">
          <h4>Dependencies</h4>
          <free-code lang="javascript">
            "dependencies": &#123;
              "freeng": "^{{version}}",
              "font-awesome": "^4.7.0"
            &#125;
          </free-code>
          <h4>Styles</h4>
          <free-code lang="javascript">
            "styles": [
              "styles.css"
            ]
          </free-code>
          <h4>styles.css</h4>
          <free-code lang="css">
            @import "../node_modules/font-awesome/css/font-awesome.min.css";
            @import '../node_modules/freeng/resources/freeng.min.css';
            @import '../node_modules/freeng/resources/themes/blue.css';
          </free-code>
        </free-panel>
      </div>

    </div>
  </div>
</div>
